<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>配置管理系统</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <form action="/middleware_search/" method="get">
        <input type="text" name="query">
        <input type="submit" value="Search">
    </form>
    <div id="main" style="height:600px"></div>
    <!-- ECharts单文件引入 -->
    <script src="{{ STATIC_URL }}js/echarts.js"></script>
    <script type="text/javascript">
	
        // 路径配置
        require.config({
            paths: {
                echarts: '{{ STATIC_URL }}js/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/force' // 使用力导向布局图就加载force模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

        var option = {
    title : {
        text: '{{out_title}}',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}'
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            //magicType: {show: true, type: ['force', 'chord']},
            saveAsImage : {show: true}
        }
    },
    legend: {
        x: 'left',
        data:['ETL','IMIX']
    },
    series : [
        {
            type:'force',
            //name : "系统间数据流",
            ribbonType: false,
            categories : [
                {
                    name: 'ETL'
                },
                {
                    name: 'IMIX'
                }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    nodeStyle : {
                        brushType : 'both',
                        borderColor : 'rgba(255,215,0,0.4)',
                        borderWidth : 1
                    },
                    linkStyle: {
                        type: 'curve'
                    }
                },
                emphasis: {
                    label: {
                        show: false
                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                    },
                    nodeStyle : {
                        //r: 30
                    },
                    linkStyle : {}
                }
            },
            useWorker: false,
            minRadius : 30,
            maxRadius : 35,
            gravity: 1.1,
            scaling: 1.1,
            roam: 'move',
            nodes:[
            {% for node in need_show_list_ETL %}
				{category:0, name: '{{ node }}', value : 20},
            {% endfor %}
            
            {% for node in need_show_list_IMIX %}
				{category:1, name: '{{ node }}', value : 10},
            {% endfor %}
      
                        	
            ],
           links : [
                
                
            ]
        }
    ]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
function eConsole(param) {
	var nodeName = param.name;
	nodeName = nodeName.replace("\t","|");
	window.location.href='/{{jump_to}}_'+nodeName+'/';
}
      
		
		
		
		//myChart.on(ecConfig.EVENT.CLICK, eConsole);
		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		//myChart.on(ecConfig.EVENT.HOVER, eConsole);
		myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
		myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
		myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
		}
		);
		
	
	
	
    </script>
    <div style = "margin: 0; font-size: 11px; text-align: right; color: #487858;">
        <a href="/upload_file/">| 文件上传</a> |
		<a href="/system_detail/">系统详情页</a> |
		<a href="/version_detail/">版本详情页</a> |
		<a href="/wiki_index/">系统百科页</a> |
		<a href="/dataex_detail/">交互信息展示页</a> |
		<a href="/cm_baseline/">基线展示页</a> |
		<a href="/cm_bi_index/">报表展示页</a> |
		<a href="/test_report_index/">测试周报页</a> |
	</div>
</body>